<template>
  <div style="height: 100%; position: relative">
    <el-drawer
      title="新增"
      :visible.sync="show_dialog"
      direction="rtl"
      size="80%"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <div class="demo-drawer__content" ref="content">
        <el-form
          :model="form"
          :rules="rules"
          v-if="show_dialog"
          ref="editDrawer"
        >
          <el-form-item
            label="商家名称:"
            :label-width="formLabelWidth"
            prop="MerchantID"
          >
            <el-select
              v-model="form.MerchantName"
              ref="selecttext"
              filterable
              placeholder="请选择"
              @change="selectChange($event)"
            >
              <el-option
                v-for="item in storesList"
                :key="item.store_id"
                :label="item.store_name"
                :value="`${item.store_id},${item.store_name}`"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="供应商名称:"
            :label-width="formLabelWidth"
            prop="ServiceSuppliersID"
          >
            <el-select v-model="form.ServiceSuppliersID" placeholder="请选择">
              <el-option
                v-for="item in suppliers"
                :key="item.ServiceSuppliersID"
                :label="item.SuppliersName"
                :value="item.ServiceSuppliersID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="服务类型:"
            :label-width="formLabelWidth"
            prop="application_services"
          >
            <el-select
              v-model="form.application_services"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in Services"
                :key="item.key"
                :label="item.des"
                :value="item.des"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="购买金额:"
            :label-width="formLabelWidth"
            prop="PurchaseValue"
          >
            <el-input v-model="form.PurchaseValue"></el-input>
          </el-form-item>
          <el-form-item
            label="购买数量:"
            :label-width="formLabelWidth"
            prop="PurchaseAmount"
          >
            <el-input v-model="form.PurchaseAmount"></el-input>
          </el-form-item>
          <el-form-item
            label="剩余数量:"
            :label-width="formLabelWidth"
            prop="SurplusAmount"
          >
            <el-input v-model="form.SurplusAmount"></el-input>
          </el-form-item>
          <el-form-item
            label="起止时间:"
            :label-width="formLabelWidth"
            prop="time_end_start"
          >
            <el-date-picker
              v-model="form.time_end_start"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            label="预警号码:"
            :label-width="formLabelWidth"
            prop="WarningNumber"
          >
            <el-input v-model="form.WarningNumber"></el-input>
          </el-form-item>
          <el-form-item
            label="收费模式:"
            :label-width="formLabelWidth"
            prop="charge_mode_mark"
          >
            <el-select v-model="form.charge_mode_mark" placeholder="请选择">
              <el-option
                v-for="item in markList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="扣减模式:"
            :label-width="formLabelWidth"
            prop="balance_deduction_mode"
          >
            <el-select
              v-model="form.balance_deduction_mode"
              placeholder="请选择"
            >
              <el-option
                key="shared_mode"
                label="共享模式"
                value="shared_mode"
              ></el-option>
              <el-option
                key="sub_account_independent_deduction_mode"
                label="子账户独立扣减"
                value="sub_account_independent_deduction_mode"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注:" :label-width="formLabelWidth" prop="note">
            <el-input v-model="form.note"></el-input>
          </el-form-item>
          <el-form-item
            label="短信模板-店铺简称:"
            :label-width="formLabelWidth"
            prop="store_abbr"
          >
            <el-input v-model="form.store_abbr"></el-input>
          </el-form-item>
          <el-form-item
            label="短信模板-店铺地址:"
            :label-width="formLabelWidth"
            prop="store_address"
          >
            <el-input v-model="form.store_address"></el-input>
          </el-form-item>
          <el-form-item
            label="短信模板-活动咨询热线:"
            :label-width="formLabelWidth"
            prop="gift_tel"
          >
            <el-input v-model="form.gift_tel"></el-input>
          </el-form-item>
          <el-form-item
            label="线索类销售联系电话:"
            :label-width="formLabelWidth"
            prop="leads_call_out_tel"
          >
            <el-input v-model="form.leads_call_out_tel"></el-input>
          </el-form-item>
          <el-form-item
            label="回访类售后联系电话:"
            :label-width="formLabelWidth"
            prop="return_cal_out_tel"
          >
            <el-input v-model="form.return_cal_out_tel"></el-input>
          </el-form-item>
          <el-form-item
            label="状态:"
            :label-width="formLabelWidth"
            prop="ContractStatus"
          >
            <el-switch
              v-if="form.ContractStatus === 'Executing'"
              disabled
              v-model="form.ContractStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="Executing"
              inactive-value="Close"
              active-text="执行中"
              inactive-text="关闭"
            ></el-switch>
            <el-switch
              v-else
              v-model="form.ContractStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="Open"
              inactive-value="Close"
              active-text="开启"
              inactive-text="关闭"
            ></el-switch>
          </el-form-item>
        </el-form>
      </div>
      <div class="demo-drawer__footer">
        <el-button @click="cancelForm">取 消</el-button>
        <el-button
          type="primary"
          @click="handleClose"
          :loading="loading"
          v-show="type !== 'show'"
          >{{ loading ? "提交中 ..." : "确 定" }}</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { dateFormatter } from "@/common/js/util";
export default {
  props: ["dialog"],
  data() {
    var checkTime = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请选择起止时间"));
      }
      setTimeout(() => {
        callback();
      }, 1000);
    };
    return {
      loading: false,
      formLabelWidth: "180px",
      show_dialog: false, //弹窗显示
      MerchantID: "",
      markList: [
        { value: "called_deduction", label: "呼通计费" },
        { value: "precharge_mode", label: "预充模式" },
        { value: "effect_charge_mode", label: "按效果收费模式" },
      ],
      form: {
        MerchantName: "",
        MerchantID: "",
        ServiceSuppliersID: "",
        application_services: "",
        PurchaseValue: "",
        PurchaseAmount: "",
        SurplusAmount: "",
        time_end_start: "",
        WarningNumber: "",
        charge_mode_mark: "",
        balance_deduction_mode: "",
        note: "",
        store_abbr: "",
        store_address: "",
        gift_tel: "",
        leads_call_out_tel: "",
        return_cal_out_tel: "",
        ContractStatus: false,
        application_services_key: "",
      },
      rules: {
        MerchantName: [{ required: true, message: "商家名称不能为空" }],
        ServiceSuppliersID: [{ required: true, message: "供应商名称不能为空" }],
        application_services: [
          { required: true, message: "服务类型不能为空", trigger: "blur" },
        ],
        PurchaseValue: [{ required: true, message: "购买金额不能为空" }],
        PurchaseAmount: [{ required: true, message: "购买数量不能为空" }],
        SurplusAmount: [{ required: true, message: "剩余数量不能为空" }],
        time_end_start: [{ required: true, validator: checkTime }],
        WarningNumber: [{ required: true, message: "预警号码不能为空" }],
        charge_mode_mark: [{ required: true, message: "收费模式不能为空" }],
        balance_deduction_mode: [
          { required: true, message: "扣减模式不能为空" },
        ],
        // store_abbr: [{ required: true, message: "短信模板-店铺简称不能为空" }],
        // store_address: [
        //   { required: true, message: "短信模板-店铺地址不能为空" },
        // ],
        // gift_tel: [
        //   { required: true, message: "短信模板-活动咨询热线不能为空" },
        // ],
        ContractStatus: [{ required: true }],
      },
      type: "",
      row: "",
      Services: "", //服务类型
      storesList: [],
      suppliers: [],
    };
  },
  created() {
    this.default_data();
  },
  methods: {
    default_data() {
      //服务类型
      this.getServices();
      //供应商
      this.getStores();
      //所有供应商
      this.getSuppliers();
    },
    getSuppliers() {
      this.$http
        .post("/admin/dataService/index.php?act=merchantSet&op=getSuppliers")
        .then((res) => {
          if (res.code == 1) {
            this.suppliers = res.data;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    getStores() {
      this.$http
        .post("/admin/dataService/index.php?act=merchantSet&op=getStores")
        .then((res) => {
          if (res.code == 1) {
            this.storesList = res.data;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    getServices() {
      this.$http
        .post("/admin/dataService/index.php?act=merchantSet&op=getServices")
        .then((res) => {
          if (res.code == 1) {
            this.Services = res.data;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    show_dialog_fn(type, row) {
      this.type = type;
      this.show_dialog = true;
      if (type === "add") {
        this.form = {
          MerchantName: "",
          ServiceSuppliersID: "",
          application_services: "",
          PurchaseValue: "",
          PurchaseAmount: "",
          SurplusAmount: "",
          time_end_start: "",
          WarningNumber: "",
          charge_mode_mark: "called_deduction",
          balance_deduction_mode: "shared_mode",
          note: "",
          store_abbr: "",
          store_address: "",
          gift_tel: "",
          leads_call_out_tel: "",
          return_cal_out_tel: "",
          ContractStatus: false,
          application_services_key: "",
        };
      } else if (type === "edit") {
        this.row = row;
        this.getItemDetail(row.ID);
      }
    },
    cancelForm() {
      this.loading = false;
      this.show_dialog = false;
      clearTimeout(this.timer);
    },
    handleClose() {
      const that = this;
      let {
        MerchantName,
        MerchantID,
        ServiceSuppliersID,
        application_services,
        PurchaseValue,
        PurchaseAmount,
        SurplusAmount,
        time_end_start,
        WarningNumber,
        charge_mode_mark,
        balance_deduction_mode,
        note,
        store_abbr,
        store_address,
        gift_tel,
        leads_call_out_tel,
        return_cal_out_tel,
        ContractStatus,
      } = this.form;
      let application_services_key = application_services;
      if (application_services_key) {
        application_services_key = application_services_key.map(
          (item, index) => {
            if (this.Services) {
              let obj = this.Services.find((one) => {
                return one.des === item;
              });
              return obj.key;
            } else {
              return "";
            }
          }
        );
      } else {
        application_services_key = "";
      }
      let findFn = (arr, key, value) => {
        return arr.find((item) => item[key] == value);
      };
      let SuppliersName = this.suppliers.find((item) => {
        return item.ServiceSuppliersID == ServiceSuppliersID;
      }).SuppliersName;
      let data = {
        MerchantName,
        MerchantID,
        ServiceSuppliersID,
        SuppliersName,
        application_services: application_services.toString(),
        PurchaseValue,
        PurchaseAmount,
        SurplusAmount,
        ServiceAvailableTime: time_end_start[0],
        ServiceEndTime: time_end_start[1],
        WarningNumber,
        charge_mode_mark,
        balance_deduction_mode,
        note,
        store_abbr,
        store_address,
        gift_tel,
        leads_call_out_tel,
        return_cal_out_tel,
        ContractStatus,
        application_services_key:
          application_services_key && application_services_key.toString(),
      };
      this.$refs.editDrawer.validate((valid) => {
        if (valid) {
          if (this.type === "edit") {
            data.id = this.row.ID;
            this.editItemDetail(data);
          } else if (this.type === "add") {
            this.addItemDetail(data);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getItemDetail(id) {
      this.$http
        .post(`/admin/dataService/index.php?act=merchantSet&op=getContract`, {
          id,
        })
        .then((res) => {
          if (res.code != 1) {
            this.$message.warning(res.msg);
            this.show_dialog = false;
            return;
          }
          //处理服类型
          if (res.data.ServiceDescription) {
            res.data.application_services =
              res.data.ServiceDescription.split(",");
          }

          //处理时间
          let time1 = res.data.ServiceAvailableTime;
          let time2 = res.data.ServiceEndTime;
          if (time1) {
            time1 = dateFormatter("YYYY-MM-DD", time1 * 1000);
          }
          if (time2) {
            time2 = dateFormatter("YYYY-MM-DD", time2 * 1000);
          }
          res.data.time_end_start = [time1, time2];
          this.form = res.data;
        })
        .catch((err) => {
          this._message("error", err);
        });
    },
    addItemDetail(data) {
      this.$http
        .post(
          `/admin/dataService/index.php?act=merchantSet&op=addContract`,
          data
        )
        .then((res) => {
          if (res && res.code == 1) {
            this.show_dialog = false;
            this.$parent.getListData();
            this.$message.success(res.msg);
          } else {
            this.$message.warning(res.msg);
          }
        })
        .catch((err) => {
          this._message("error", err);
        });
    },
    editItemDetail(data) {
      this.$http
        .post(
          `/admin/dataService/index.php?act=merchantSet&op=updateContract`,
          data
        )
        .then((res) => {
          if (res.code == 1) {
            this.show_dialog = false;
            this.$message.success(res.msg);
            this.$parent.getListData();
          } else {
            this.$message.warning(res.msg);
          }
        })
        .catch((err) => {
          this._message("error", err);
        });
    },
    selectChange(val) {
      let [value, label] = val.split(",");
      console.log(val);
      this.form.MerchantName = label;
      this.form.MerchantID = value;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form {
  // width: 560px;
  padding-left: 10px;
}

.el-select /deep/.el-input {
  width: 360px;
}
.plantTable /deep/.el-input {
  width: auto;
}
form /deep/.el-input {
  width: 360px;
}

.demo-drawer__content {
  position: absolute;
  top: 0;
  bottom: 60px;
  width: 100%;
  overflow-y: auto;
}

/deep/.el-drawer__body {
  position: absolute;
  top: 77px;
  bottom: 0;
  width: 100%;
  overflow: auto;
  padding-bottom: 60px;
}

.demo-drawer__footer {
  position: absolute;
  bottom: 10px;
  left: 20px;
}

.avatar-uploader /deep/.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader /deep/.el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.row_line {
  border-bottom: 1px dashed #d7d8dc;
}
.goodsInfo {
  display: flex;
  align-items: center;
}
</style>
